<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  	<link href="https://cdn.bootcdn.net/ajax/libs/jspdf/0.9.0/jspdf.amd.min.js" rel="stylesheet">
  	<script type="text/javascript" src="./stitic/js/jquery-3.4.1.min.js"></script>
	<title>结业证书</title>
</head>
<style>
   *{
        padding:0;
        margin:0;
      }
     .imgage{
        position: relative;
        width:1050px;
         margin: 0 auto;
        
      }
      .imgage img {
        width:100%;
        height:100%; 
      }
      .imgage .name{
        position: absolute;
        top:40.5%;
        left:14%;
        width:27%;
      }
      .startTime{
      	position:absolute;
        top:40.5%;
        left:31%;
      }
       .endTime{
      	position:absolute;
        top:40.5%;
        left:46%;
      }
      .title{
      	position:absolute;
        top:40.5%;
        left:67%;
      }
      .grade{
      	position:absolute;
        top:47%;
        left:62%;
      }
       .code{
      	position:absolute;
        top:65.1%;
        left:29%;
      }
       .year{
      	position:absolute;
        top:77.5%;
        left:67%;
      }
       .month{
      	position:absolute;
        top:77.5%;
        left:77%;
      }
       .data{
      	position:absolute;
        top:77.5%;
        left:83%;
      }
  *{
    padding:0;
    margin:0;
  }
  header, footer {
	display: none;
}
	@media print {
	header {
		display: block;
	}
	footer {
		display: block;
	}
}

  
   .a4-endwise{
 /*     width: 1075px;
     height: 1522.7px*/;
      overflow: hidden;
      padding: 0;
      word-break:break-all;
      /*background: white;*/
      /* margin: 30px; */
    }
  	input{
      border:0px;
      background-color: transparent;
      font-size:25px;
      text-align: left;
      width: 70%;
    }
  body div div input{
		position: fixed;
  }
</style>
  <style media="print">
.NoPrint { DISPLAY: none }
</style>
<body>
   <div class="imgage">
      <img src="stitic/img/credential.jpg">
      <span class="name"><input type="text" field="name" style="width:27%;" disabled ></span>
      <span  class="startTime"><input type="text" field="start_time" name="start_time" disabled ></span>
      <span class="endTime"><input type="text" field="end_time" disabled ></span>
      <span class="title"><input type="text" field="traindata_name" disabled ></span>
      <span class="grade"><input type="text" field="grade" disabled ></span>
      <span class="code"><input type="text" field="issue"  style="width:21%;" disabled ></span>
      <span class="year"> <input type="text" field="year" style="width:21%;"disabled ></span>
      <span class="month"><input type="text" field="month" style="width:21%;"disabled ></span>
      <span class="data"><input type="text" field="data" style="width: 21%;"disabled ></span>
  	</div>
  	 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    function getQueryString(name) {
        var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"))
        if(result == null || result.length < 0){
          return ""
        }
        return result[1]
    } 

    function pajax1(option){
      return new Promise(resolve => {
       $.ajax({
          ...option,
          success (data) {
            resolve(option.success(data))
          },
          error: function () {
            option.error()
          }
        })
      })
    }
    
    function pajax(option){
      return new Promise((resolve,reject) => {
       $.ajax({
          ...option,
          success (data) {
            resolve(data)
          },
          error: function (ex) {
            reject(ex)
          }
        })
      })
    }
    
     function dealname (idnumber) {
      return pajax({
        url: '../../index.php/admin/Train/getnamebyid',
        type: 'POST',
        data: {idnumber},
        success: function(data) {
        	return data
        },
        error: function() {
         alert("error!")
        }
      })
    }
    
    function dheckTable(idnumber){
      return pajax({
        url:"../../index.php/admin/Traindata/TraindataListtrain",
        type: 'POST',
        data: {idnumber},
        success: function (data) {
          return data
        },
        error: function () {
          alert('error!')
        }
      })
    }
    

    (async function(){
    	var idnumber = getQueryString('item')
    
      var name = await dealname(idnumber)
        console.log(name)
      //此接口是获取培训信息
      var data = await dheckTable(idnumber)
      console.log(data.data.data[0])
      var project = data.data.data[0]
      $("input[field='start_time']").val(project.start_time);
       $("input[field='end_time']").val(project.end_time);
      $("input[field='traindata_name']").val(project.traindata_name);
      $("input[field='issue']").val(project.issue);
      $("input[field='name']").val(name.data[0].name);
    	switch(project.grade){
          case 1 :
             $("input[field='grade']").val("优秀");
             break; // 可选的
          case 2 :
              $("input[field='grade']").val("合格");
             break; // 可选的
		  case 3 :
              $("input[field='grade']").val("不合格");
             break; // 可选的	
      }
      var date_time = new Date()
      console.log(date_time)
    var cur_year = date_time.getFullYear()
    var cur_month = date_time.getMonth()
    var cur_data = date_time.getDate()
    console.log(cur_data)
    $(function () {
      $("input[field='year']").val(cur_year)
      $("input[field='month']").val(cur_month + 1)
     $("input[field='data']").val(cur_data)
    })
    })()
    
    
/*$("body").append('<div id="pdf1">…………………………………………………………</div>');*/
/*设置新元素样式*/
 $("#pdf1").css({
    "background-color": "#fff",
    "position": "absolute",
    "top": "0px",
    "z-index": "-1",
    "height": $("#pdf").height()
});
/*html2canvas生成图片，jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
    background: "#fff",
    allowTaint: true,
    taintTest: false,
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pageHeight = contentWidth / 592.28 * 841.89;
        var leftHeight = contentHeight;
        var position = 0;
        var imgWidth = 595.28;
        var imgHeight = 592.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var img = new Image();
        img.src = pageData;
        var pdf = new jsPDF('p', 'pt', 'a4');
        img.onload = function() {
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('report_pdf_' + new Date().getTime() + '.pdf');
            $("#pdf1").remove();
        }
    },
})
  </script>
</body>
</html>
